import { defineComponent, reactive, computed, openBlock, createElementBlock, Fragment, renderList, unref, normalizeClass, normalizeStyle, createElementVNode } from "vue";
var hoverEffectCard_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".reflection-container[data-v-685b75e0]{background:rgba(0,0,0,0);position:relative;display:inline-block;vertical-align:middle;transform-style:preserve-3d;perspective:1000px}.reflection-container .reflection-grid-cell[data-v-685b75e0]{position:absolute;z-index:1;width:10%;height:10%}.reflection-content[data-v-685b75e0]{height:480px;width:280px;background:#000 url(https://unsplash.it/800/800/?random);background-size:cover;background-position:center;transform:rotateX(0) rotateY(0);pointer-events:none;transition:.1s linear transform;overflow:hidden}\n")();
var _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = ["onMouseover"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "hover-effect-card",
  setup(__props) {
    const totalArray = new Array(100).fill(0);
    const state = reactive({
      curIndex: null
    });
    const handleCellMouseOver = (index2) => {
      state.curIndex = index2;
    };
    const handleContainerLeave = () => {
      state.curIndex = null;
    };
    const cellStyles = computed(() => (index2) => {
      const x = index2 % 10;
      const y = parseInt(String(index2 / 10));
      return {
        top: y * 10 + "%",
        left: x * 10 + "%"
      };
    });
    const blockStyles = computed(() => {
      if (!state.curIndex) {
        return;
      }
      const x = state.curIndex % 10;
      const y = parseInt(String(state.curIndex / 10));
      console.log(state.curIndex);
      const xRotate = y * -5 + 25;
      const yRotate = x * 5 - 25;
      return {
        transform: `rotateX(${xRotate}deg) rotateY(${yRotate}deg)`
      };
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: "reflection-container",
        onMouseleave: handleContainerLeave
      }, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(totalArray), (item, index2) => {
          return openBlock(), createElementBlock("a", {
            class: normalizeClass(["reflection-grid-cell", `reflection-grid-cell-${index2 + 1}`]),
            style: normalizeStyle(unref(cellStyles)(index2)),
            onMouseover: ($event) => handleCellMouseOver(index2),
            href: "#"
          }, null, 46, _hoisted_1);
        }), 256)),
        createElementVNode("div", {
          class: "reflection-content",
          style: normalizeStyle(unref(blockStyles))
        }, null, 4)
      ], 32);
    };
  }
});
var HoverEffectCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-685b75e0"]]);
HoverEffectCard.install = (App) => {
  App.component(HoverEffectCard.__name, HoverEffectCard);
};
const components = [HoverEffectCard];
const install = (App) => {
  components.forEach((item) => {
    App.component(item.__name, item);
  });
};
var index = { install };
export { HoverEffectCard, index as default };
